import React, { Component } from 'react';
import { connect } from 'dva';
import { Drawer,Tabs,Radio,Icon,Input,Button,Checkbox,Select } from 'antd';
import Editor from '@/utils/Editor';
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1131883_m18hmgbwet.js', // 在 iconfont.cn 上生成
});

@connect(({ SpecialCase, loading }) => ({
  SpecialCase,
  loading: loading.models.data,
}))
class SpecialCaseAdd extends React.Component {

  state = {
    addValue:"",
    questions:["发电机房定时接口你发个人", "鸡扣费我试了顾客聚聚哦喷淋管"]
  };
  componentDidMount() {
  };

  addValue = () =>{
    const { questions,addValue } = this.state;
    switch (addValue.trim()){
      case "":
        break
      default:
        questions.push(addValue);
        this.setState({
          questions: questions,
          addValue: "",
        })
    }
  };

  onChange = (e, type, index) =>{
    switch (type){
      case "a":
        this.setState({
          addValue: e.target.value,
        });
        break
      case "b":
        const { questions } = this.state;
        questions[index] = e.target.value;
        this.setState({
          questions: questions,
        });
        break
    }
  };

  lessdata = () => {
    const { questions } = this.state;
    return (
      <div>
        <div>
          <div style={{marginBottom:'20px', fontSize:'16px',width:'18%',cursor:'pointer'}}>
            <Icon type="left" />&nbsp;&nbsp;<span>返回列表</span>
          </div>
          <Icon style={{transform: 'rotate(90deg)'}} type="minus"/>用户问题
          <div style={{margin: '15px 0px'}}>
            <Input style={{ width: '90%', lineheight: '35px'}} placeholder="请输入相似问题, 点击回车继续添加" value={this.state.addValue} onChange={event=>{this.onChange(event,"a",-1)}} onPressEnter={this.addValue}/>
            <div style={{ width:'6%', float:'right'}}>
              <Icon onClick={this.addValue} type="plus-circle" />
            </div>
          </div>

          {
            questions.map((q,i)=>{
              return(
                <div style={{width: '100%',marginBottom:'5px'}}>
                  <div style={{width: '90%', float: 'left'}}>
                    <Input style={{backgroundColor: '#F9FAFF',padding: '8px 15px', borderBottom: '1px #E8EEFF solid'}} value={q} onChange={event=>{this.onChange(event,"b",i)}}></Input>
                  </div>
                  <div style={{width: '6%', float: 'right', padding: '8px 0px'}}>
                    <Icon style={{marginRight: '5px'}} type="close-circle" /><Icon type="arrow-up" />
                  </div>
                  <div style={{clear:'both'}}></div>
                </div>
              )
            })
          }
        </div>

        <div style={{margin:'20px 0px'}}>
          <Icon style={{transform: 'rotate(90deg)'}} type="minus"/>问题回复
          <div className='fuwenben' style={{ lineHeight: '20px', width: 640, zIndex:1 }}>
            <Editor content="" name="content" id="content" height="300" width="400" ref={r => this.ueditor = r} />
          </div>
        </div>

        <div style={{margin:'20px 0px'}}>
          <Icon style={{transform: 'rotate(90deg)'}} type="minus"/>词槽处理
          <div>
            <Checkbox style={{marginRight:'10px'}}>清空词槽</Checkbox>
            <Select value={1} style={{ width: '16%',marginRight:'10px' }} size="small">
              <Select.Option value={1}>RMB</Select.Option>
              <Select.Option value={2}>Dollar</Select.Option>
            </Select>
            <Button type="primary" size="small">添加</Button>
          </div>
          <div>
            <Radio.Group value={1}>
              <Radio value={1}>重新询问已清空的词槽</Radio>
            </Radio.Group>
          </div>
          <div>
            <Button type="primary">保存</Button>
          </div>
        </div>
      </div>
    )
  };


  render() {
    return (
      <div>
        {this.lessdata()}
      </div>
    );
  }
}

export default SpecialCaseAdd;
